import React from 'react'
import { TweenOneGroup } from 'rc-tween-one'

const enterAnim = [
  {
    opacity: 0,
    x: 30,
    backgroundColor: '#fffeee',
    duration: 0,
  },
  {
    height: 0,
    duration: 200,
    type: 'from',
    delay: 250,
    ease: 'easeOutQuad',
    onComplete: e => {
      e.target.style.height = 'auto'
    },
  },
  {
    opacity: 1,
    x: 0,
    duration: 250,
    ease: 'easeOutQuad',
  },
  {
    delay: 1000,
    backgroundColor: '#fff',
  },
]

const leaveAnim = [
  {
    duration: 250,
    x: -30,
    opacity: 0,
  },
  {
    height: 0,
    duration: 200,
    ease: 'easeOutQuad',
  },
]

const AnimTableBody = props => (
  <TweenOneGroup
    component="tbody"
    {...props}
    enter={enterAnim}
    leave={leaveAnim}
    appear={false}
  />
)

export default AnimTableBody
